import React, { useEffect, useState, useRef } from 'react'
import { getLogin, getMypageData } from '../../api/User'
import { useHistory } from 'react-router-dom'
import type { MypageData, ReLogin } from '../../types/mypage'
import store from '../../store/index'
import { getToken, getUserMessage } from '../../store/actionDemo'
import { Button, Space, Toast, Form, Input, NavBar } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import styles from './Login.module.css'

export default function useIndex() {
  const history = useHistory()
  const [visible, setVisible] = useState(false)


  const onFinish = async (values: any) => {
    const res = await getLogin(values)
    if (res.code === 200) {
      store.dispatch(getToken(res.data))
      // const res2 = await getMypageData()
      // store.dispatch(getUserMessage(res2.data))
      //获取路径
      Toast.show({
        content: '登录成功'
      })
      history.push('/layout')
    } else {
      Toast.show({
        content: '用户名或密码错误',
        afterClose: () => {
          history.push('/layout')
        },
      })
    }
  }
  return (
    <div>
      <NavBar onBack={() => history.goBack()}>牛马购商城</NavBar>
      <Form layout='horizontal' onFinish={onFinish}>
        <Form.Item label='手机号' name='loginname'>
          <Input placeholder='请输入用户名' clearable />
        </Form.Item>
        <Form.Item
          label='密码'
          name='password'
          extra={
            <div className={styles.eye}>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input
            placeholder='请输入密码'
            clearable
            type={visible ? 'text' : 'password'}
          />
        </Form.Item>
        {/* <Form.Item label='短信验证码' extra={<a>发送验证码</a>}>
          <Input placeholder='请输入验证码' />
        </Form.Item> */}
        <Form.Item>
          <Button block color='primary' size='large' type='submit' shape='rounded'>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
